import React, { memo } from 'react'
import { addCount } from '@/store/modules/home'
import { useAppSelector, useAppDispatch, useAppShallowEqual } from '@/store'

interface Iprops {
  p1: string
  p2: string
  style: any
}

const Acpm: React.FC<Iprops> = (props) => {
  const $dispatch = useAppDispatch()
  const { count, name } = useAppSelector((store) => {
    return {
      count: store.home.count,
      name: store.home.name
    }
  }, useAppShallowEqual)

  const btnHandle = () => {
    $dispatch(addCount(1))
  }
  return (
    <div>
      <div>Acpm-</div>
      <span>{props.p1}-</span>
      <span>{props.p2}-</span>
      <span style={props.style}>xxxx</span>
      {count} {name}
      <button onClick={btnHandle}>+1</button>
    </div>
  )
}

export default memo(Acpm)
